<template>
    <view class="c-icons">
    	<text :style="[ styleObj_ ]" class="iconfont" :class="[ type ]" @click="onClick_"></text>
    </view>
</template>

<script>
    export default {
        name: "c-icons",
        props: {
            type: {
                type: String,
                default: ""
            },
            color: {
                type: [String, Boolean],
                default: false
            },
            size: {
                type: [Number, String],
                default: 28
            },
            spin: {
                type: Boolean,
                default: false
            },
            rotate: {
                type: [Number, String, Boolean],
                default: false
            }
        },
        computed: {
            rotate_ () {
              return String(this.rotate) === 'false' ? false : this.rotate;
            },
            styleObj_ () {
                const obj = {
                    fontSize: String(this.size).indexOf('px') !== -1 ? this.size : (uni.upx2px(this.size) + 'px')
                };
                String(this.color) !== "false" && (obj["color"] = this.color);
                this.rotate_ && (obj.transform = isNaN(this.rotate) ? `rotate(${this.rotate})` : `rotate(${this.rotate}deg)`);
                if (this.spin) {
                    obj.animation = "c-icon-spin 1.5s linear infinite";
                }
                return obj;
            }
        },
        methods: {
            onClick_() {
                this.$emit("click");
            }
        }
    };
</script>

<style scoped lang="scss">
	/* #ifndef APP-PLUS-NVUE */
    @import "@/assets/styles/iconfont.css";
	/* #endif */
	.c-icons{
		@include flex();
		align-items: center;
	}
    .iconfont {
        /* #ifndef APP-PLUS-NVUE */
        display: inline-block;
        /* #endif */
        line-height: 1;
        @include tst(transform);
    }
</style>
